<template>
  <div class="table-chart" ref='chart' v-html="items">
  </div>
</template>

<script>
export default {
  props: ['chartData'],
  data(){
    return {
       items: ''
    }
  },
  computed: {
    element () {
      return this.$refs.chart
    }
  },
  methods: {
    renderChart (data) {
      var _innerHTML = '';
      if (!data || !data.length || !data[0].length) {
        _innerHTML = '<div class="empty">暂无数据</div>';
      } else {
        var _html = '<table>', tdLen = 0;
        for(var i=0; i<data.length; i++){
            var trData = data[i];
            if(trData.length > 0){
                if(i==0){
                    tdLen = trData.length;
                    _html += '<thead><tr>';
                } else _html += '<tr>';
                for(var j=0; j<tdLen; j++){
                    if(i==0) _html += '<th>' + trData[j] || '-' +'</th>';
                    else{
                       _html += '<td>' + trData[j] || '-' +'</td>';
                    }
                }
                if(i==0) _html += '</tr></thead>';
                else _html += '</tr>';
            }
        }
        _html += '</table>';
        _innerHTML = _html;
      }
      return _innerHTML;
    }
  },
  watch: {
      chartData:{
        immediate: true,
        handler(val){
          this.items = this.renderChart(val);
        }
      }
  },
  mounted () {
    //案例：[["班次", "类型", "学习平台", "起止时间", "选课人数"], ["ssss", "xxxx", "eeee", "2020-01-12至2020-08-20", "200"], ...]
    this.items = this.renderChart(this.chartData);
  }
}
</script>
<style lang="scss">
.empty{
    text-align:center;
    width:100%;
    height:100%;
    color:#ccc;
    font-size:13px;
}
</style>
<style lang="scss">
.table-chart{
    position:relative;
    width:100%;
    table{
        border:none;
        width:100%;
        padding:0;
        margin:0;
        text-align:center;
        margin:0 auto;
        border-collapse:collapse;
        *{
            border:none;
            padding:0;
            margin:0;
        }
        tr{  
            td{
                font-size:14px;
                color:#666;
                padding:10px 15px;
                padding-left:0;
                line-height:20px;
                max-height:80px;
                text-align:center;
                overflow: hidden;
                text-overflow:ellipsis;
                // white-space:nowrap;
                &:first-child{
                    text-align:left;
                    padding-left:10px;
                    max-width:200px;
                    p{
                      overflow: hidden;
                      text-overflow:ellipsis;
                      white-space:nowrap;
                    }
                }
                &:nth-child(3){
                  max-width:100px;
                }
            }
            &:nth-child(even){
                background:#fff;
            }
            &:nth-child(odd){
                background:#f8f8f8;
            }
        }
        thead{
            tr{
                background:#fff !important;
                border-top:1px solid #ddd;
                border-bottom: 1px solid #ddd;
                th{
                    font-size:14px;
                    color:#333;
                    padding:12px 15px;
                    padding-left:0;
                    line-height:20px;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                    text-align:center;
                    &:first-child{
                        text-align:left;
                        padding-left:10px;
                    }
                }
            }
        } 
    }
}
</style>
